<script setup lang="ts">
  import { ref,onMounted } from 'vue'
  import TopTotal from './components/left/TopTotal.vue';
  import TopTen from './components/left/TopTen.vue';
  import LendOut from './components/left/LendOut.vue';

  import MouthCount from './components/middle/MouthCount.vue';
  import BorrowOptions from './components/middle/BorrowOptions.vue';

  import MouthRange from './components/right/MouthRange.vue';
  import OnlineCount from './components/right/OnlineCount.vue';

  import BaseHeader from './components/BaseHeader.vue';
  onMounted(()=>{
    // mmPreventMove.value.addEventListener('mousemove', function(e:any) {
    //   e.preventDefault();
    // });
  })
  const mmPreventMove = ref();
  defineProps<{ msg: string }>();
</script>

<template>
  <BaseHeader />
  <div class="box-main" ref="mmPreventMove">
    <!-- 总览，左上 -->
    <div class="left-box">
      <TopTotal />
      <TopTen title="资料入库数量前10"/>
      <LendOut title="资料请领数量统计前10"/>
    </div>
    <div class="mid-box">
      <MouthCount title="每月借阅统计(次/月)&每月归还统计(次/月)"/>
      <BorrowOptions />
    </div>
    <div class="right-box">
      <MouthRange title="月度领用率和归还率统计前5"/>
      <OnlineCount title="资料在库统计前10"/>
    </div>
  </div>
</template>

<style scoped lang="less">
.read-the-docs {
  color: #888;
}

.box-main{
  width: calc(100% - 1vw);
  height: calc(100% - 10vh);
  padding: 0 .5vw 2vh;
  overflow: hidden;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  .left-box{
    width: 25vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .right-box{
    width: 25vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .mid-box{
    width: 47vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>

<style>
.centered-gradient {
  /* background-image:radial-gradient(ellipse at center, rgba(21,38,76,0.3),rgba(23,48,91,0.3)); */
  /* box-shadow: inset 1px 1px 6px 3px #5b7091; */
  
   /* box-shadow: inset 1px 1px 6px 3px rgb(91, 112,145); */
  background-size: cover;
  background-position: center;
}

.bx-title {
  width: 100%;
  padding: 1vh;
  box-sizing: border-box;
  font-size: 10px;
  height: 3vh;
}

</style>
